import React, { Component } from 'react';
import './MyTab.scss';

class MyTab extends Component {
    constructor(props) {
        super(props);
        let pic = 'https://t14.baidu.com/it/u=1448235142,3819481528&fm=224&app=112&size=h200&n=0&f=JPEG&fmt=auto?sec=1667926800&t=fc40d3ee66614457032081641b65bf17';
        let pic2='https://pic.cdfgsanya.com/assets/upload/product/5577c3765b2e97c00b14e82873c4db2a_400x400.jpg'
        let pic3='https://pic.cdfgsanya.com/assets/upload/product/a024fd2e6e4bfbb7e73c0e4dc17595be_400x400.png'
        let pic4='https://pic.cdfgsanya.com/assets/upload/product/508ae228fe78d23223f257bb7410c1c6_400x400.png'
        let pic5='https://pic.cdfgsanya.com/assets/upload/product/cf5648f90121f8151b5c2b38ff769242_400x400.jpg'
        let pic6='https://pic.cdfgsanya.com/assets/upload/visual/df9a25edd6952931af2266a2496c0e0c.jpg?1667210847019'
        let pic7='https://pic.cdfgsanya.com/assets/upload/visual/f46db23addac82c2051cedf65f62684a.jpg?1667370289028'
        let pic8='https://pic.cdfgsanya.com/assets/upload/product/fe995e8b6f5929a3222ffdf9bacac02e_400x400.jpg'
        this.state = {
            currentIndex:0,
            tab:[
                {
                    tabName:'活动专区',
                    goods:[
                        { pic, name: '卸妆' },
                        { pic:pic2, name: '洁面/去角质' },
                        { pic:pic3, name: '爽肤水/喷雾' },
                        { pic:pic4, name: '乳液' },
                        { pic:pic8, name: '精华/精油' },
                        { pic:pic3, name: '面霜' },
                        { pic:pic2, name: '面膜' },
                        { pic, name: '防晒隔离' },
                        { pic:pic8, name: '润唇膏/唇膜' },
                        { pic:pic3, name: '面部套装' },
                        { pic:pic4, name: '其他面部' },
                    ]
                },
                {
                    tabName:'品牌', 
                    goods:[
                        { pic:pic2, name: '卸妆' },
                        { pic:pic2, name: '洁面/去角质' },
                        { pic:pic2, name: '爽肤水/喷雾' },
                        { pic:pic2, name: '乳液' },
                        { pic:pic2, name: '精华/精油' },
                        { pic:pic2, name: '面霜' },
                        { pic:pic2, name: '面膜' },
                        { pic:pic2, name: '防晒隔离' },
                        { pic:pic2, name: '润唇膏/唇膜' },
                        { pic:pic2, name: '面部套装' },
                        { pic:pic2, name: '其他面部' },
                    ]
                },
                {
                    tabName:'美容护肤',
                    goods:[
                        { pic:pic3, name: '卸妆' },
                        { pic:pic3, name: '洁面/去角质' },
                        { pic:pic3, name: '爽肤水/喷雾' },
                        { pic:pic3, name: '乳液' },
                        { pic:pic3, name: '精华/精油' },
                        { pic:pic3, name: '面霜' },
                        { pic:pic3, name: '面膜' },
                        { pic:pic3, name: '防晒隔离' },
                        { pic:pic3, name: '润唇膏/唇膜' },
                        { pic:pic3, name: '面部套装' },
                        { pic:pic3, name: '其他面部' },
                    ]
                },
                {
                    tabName:'彩妆',
                    goods:[
                        { pic:pic4, name: '卸妆' },
                        { pic:pic4, name: '洁面/去角质' },
                        { pic:pic4, name: '爽肤水/喷雾' },
                        { pic:pic4, name: '乳液' },
                        { pic:pic4, name: '精华/精油' },
                        { pic:pic4, name: '面霜' },
                        { pic:pic4, name: '面膜' },
                        { pic:pic4, name: '防晒隔离' },
                        { pic:pic4, name: '润唇膏/唇膜' },
                        { pic:pic4, name: '面部套装' },
                        { pic:pic4, name: '其他面部' },
                    ]
                },
                {
                    tabName: '香水',
                    goods:[
                        { pic:pic5, name: '卸妆' },
                        { pic:pic5, name: '洁面/去角质' },
                        { pic:pic5, name: '爽肤水/喷雾' },
                        { pic:pic5, name: '乳液' },
                        { pic:pic5, name: '精华/精油' },
                        { pic:pic5, name: '面霜' },
                        { pic:pic5, name: '面膜' },
                        { pic:pic5, name: '防晒隔离' },
                        { pic:pic5, name: '润唇膏/唇膜' },
                        { pic:pic5, name: '面部套装' },
                        { pic:pic5, name: '其他面部' },
                    ]
                },
                {
                    tabName:'酒类',
                    goods:[
                        { pic:pic6, name: '精华/精油' },
                        { pic:pic6, name: '面霜' },
                        { pic:pic6, name: '面膜' },
                        { pic:pic6, name: '防晒隔离' },
                        { pic:pic6, name: '润唇膏/唇膜' },
                        { pic:pic6, name: '面部套装' },
                        { pic:pic6, name: '其他面部' },
                    ]
                },
                {
                    tabName: '腕表首饰',
                    goods:[
                        { pic:pic7, name: '卸妆' },
                        { pic:pic7, name: '洁面/去角质' },
                        { pic:pic7, name: '爽肤水/喷雾' },
                        { pic:pic7, name: '乳液' },
                        { pic:pic7, name: '精华/精油' },
                        { pic:pic7, name: '面霜' },
                        { pic:pic7, name: '面膜' },
                    ]
                },
                {
                    tabName:'服装箱包',
                    goods:[
                        { pic:pic8, name: '卸妆' },
                        { pic:pic8, name: '洁面/去角质' },
                        { pic:pic8, name: '爽肤水/喷雾' },
                        { pic:pic8, name: '乳液' },
                        { pic:pic8, name: '精华/精油' },
                        { pic:pic8, name: '面霜' },
                        { pic:pic8, name: '面膜' },
                        { pic:pic8, name: '防晒隔离' },
                        { pic:pic8, name: '润唇膏/唇膜' },
                        { pic:pic8, name: '面部套装' },
                        { pic:pic8, name: '其他面部' },
                    ]
                },
                {
                    tabName: '食品保健',
                    goods:[
                        { pic, name: '卸妆' },
                        { pic, name: '洁面/去角质' },
                        { pic, name: '爽肤水/喷雾' },
                        { pic, name: '乳液' },
                        { pic, name: '精华/精油' },
                        { pic, name: '面霜' },
                        { pic, name: '面膜' },
                        { pic, name: '防晒隔离' },
                        { pic, name: '润唇膏/唇膜' },
                        { pic, name: '面部套装' },
                        { pic, name: '其他面部' },
                    ]
                },
            ]
        }
    }
    handleClick(index){
        this.setState({
            currentIndex:index
        })
        // console.log(index,this.state.currentIndex);
    }
    render() {
        return (
            <div className="tab">
                <div className='tabName'>
                {
                    this.state.tab.map((item,index)=>{
                        return (
                            <div className={`classify ${this.state.currentIndex==index?'active':''}`} key={index} onClick={()=>{this.handleClick(index)}}>
                                <span>{item.tabName}</span>
                            </div>
                        )
                    })
                }
                </div>
                <div className='goods'>
                <h3>面部护理</h3>
                {
                    this.state.tab[this.state.currentIndex].goods.map((item,index)=>{
                        return (
                            <div className="goodlist" key={index}>
                                <img src={item.pic} alt="" />
                                <span>{item.name}</span>
                            </div>
                        )
                    })
                }
                </div>                
            </div>
        );
    }
}

export default MyTab;